<!--
  功能：功能描述
  作者：guolei
  邮箱：guolei@briup.com
  时间：2021年03月18日 10:19:15
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class='add'>
  <!--form表单-->
  
      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="标题" prop="name">
      <el-input v-model="ruleForm.title"></el-input>
    </el-form-item>
    <el-form-item label="分类" prop="region">
      <el-select v-model="ruleForm.categoryId" placeholder="请选择分类">
        <el-option
          v-for="item in arr_category"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="封皮" required>
            <el-input v-model="ruleForm.cover"></el-input>
    </el-form-item>
    <el-form-item label="正文" prop="desc">
      <el-input type="textarea" v-model="ruleForm.content"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button size="small" type="primary" @click="submitForm">发布</el-button>
      <el-button size="small" @click="resetForm">返回</el-button>
    </el-form-item>
  </el-form>
    <!--form表单-->
  </div>
</template>

<script>
import axios from '../../utils/request.js'
import qs from 'querystring'
export default {
  // 组件名称
  name: 'demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
   return {
     ruleForm:{},
     arr_category:[]
   }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    resetForm(){
        this.$router.push({name:"information"})
    },
    submitForm(){
        axios.post('/article/saveOrUpdate',qs.stringify(this.ruleForm)).then(res=>{
        if(res.status === 200){
          this.$router.push({name:'information'})
          this.$message({
            type:'success',
            message:'发布成功'
          })
        }
      })
    },

     //查询所有分类id
     findAllcategory(){
       axios.get('/category/findAll').then(res=>{
          this.arr_category = res.data
       })
     }
  },
   
  
  // 以下是生命周期钩子
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.findAllcategory()
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy () {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #ccc;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>